function Board() {
  const xPath = new Array(9);
  const yPath = new Array(8);
  const listItems = [];
  for (let i = 0; i < xPath.length; i++) {
    for (let j = 0; j < yPath.length; j++) {
      let className = "";
      if (i === 4) className += "middle ";
      if (j !== 7) className += "no-right-border ";
      if (i !== 3 && i + 1 !== xPath.length) className += "no-bottom-border ";
      if (i === 0) className += `path x x-${j} `;
      else className += 'x-' + j + ' '
      if (i === 0 && j === yPath.length - 1) className += "x-last ";
      if (j === 0) className += `path y y-${i} `;
      else className += 'y-' + i + ' '
      if (j === 0 && i === xPath.length - 1) className += "y-last ";
      listItems.push(
        <li className={className} key={`${i}-${j}`}></li>
      );
    }
  }

  function getPredictionClassName(i) {
    let res = "prediction-drop-item";
    res += " x-" + (i % 9);
    res += " y-" + Math.floor(i / 9);
    return res;
  }
  return (
    <div className="chess-board">
      <ul className="chess-board-ul">{listItems}</ul>
      <ul className="prediction-drop">
        {Array(90)
          .fill("")
          .map((item, i) => (
            <li className={getPredictionClassName(i)} key={i}></li>
          ))}
      </ul>
    </div>
  );
}
export { Board };
